<template>
  <div class="date-picker">
    <div class="options" >
      <el-button
        class="my-btn"
        v-for="(item,index) in options"
        type="primary"
        :key="index"
        @click="setDate(index)"
      >
        {{item.text}}
      </el-button>
      <el-date-picker
        v-model="date"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @change="getData(date)">
      </el-date-picker>
    </div>
  </div>
</template>

<script>
import moment from 'moment'

export default {
  props: {
    options: Array,
    getData: Function,
    defaultDate: Array
  },
  data () {
    return {
      date: this.defaultDate
    }
  },
  methods: {
    setDate (index) {
      let range = this.options[index].range
      this.date = range
      this.getData(range)
    }
  }
}
</script>
